<!DOCTYPE html>
<html>
<head>
	<title>Checkbox and Radio input with CSS3</title>
	<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
	<style type="text/css">
		label {
			display: inline-block;
			cursor: pointer;
			position: relative;
			padding-left: 25px;
			margin-right: 15px;
			font-size: 13px;
		}
		.wrapper {
			width: 500px;
			margin: 50px auto;
		}
		input[type=radio],
		input[type=checkbox] {
			display: none;
		}
		label:before {
			content: "";
			display: inline-block;
		
			width: 16px;
			height: 16px;
		
			margin-right: 10px;
			position: absolute;
			left: 0;
			bottom: 1px;
			background-color: #aaa;
			box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
		}
		
		.radio label:before {
			border-radius: 8px;
		}
		.checkbox label {
			margin-bottom: 10px;
		}
		.checkbox label:before {
		    border-radius: 3px;
		}
		
		input[type=radio]:checked + label:before {
		    content: "\2022";
		    color: #f3f3f3;
		    font-size: 30px;
		    text-align: center;
		    line-height: 18px;
		}
		
		input[type=checkbox]:checked + label:before {
			content: "\2713";
			text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
			font-size: 15px;
			color: #f3f3f3;
			text-align: center;
		    line-height: 15px;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<h1>Radio and Checkbox with CSS3</h1>

		<h3>Radio Button</h3>
		<div class="radio">
			<input id="male" type="radio" name="gender" value="male">
			<label for="male">Male</label>
			<input id="female" type="radio" name="gender" value="female">
			<label for="female">Female</label>
		</div>

		<h3>Checkbox</h3>
		<div class="checkbox">
			<input id="check1" type="checkbox" name="check" value="check1">
			<label for="check1">Checkbox No. 1</label>
			<br>
			<input id="check2" type="checkbox" name="check" value="check2">
			<label for="check2">Checkbox No. 2</label>
		</div>
	</div>
</body>
</html>